<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
	rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
<link rel="stylesheet" href="<%=basePath%>statics/css/bootstrap.min.css"
	type="text/css"></link>
<link rel="stylesheet" href="<%=basePath%>statics/css/zIndex.css"
	type="text/css"></link>

<c:if test="${user==null && referee==null &&admin==null}">
	<c:redirect url="/toLogin"></c:redirect>
</c:if>
</head>
<body>

	<c:import url="head.jsp"></c:import>
	
	<div class="panel panel-default" style="margin: 0 10% 0 10%">
		<div class="panel-heading">
			<h3 class="panel-title">管理游戏列表</h3>
		</div>
		<div class="panel-body" name="games">
			<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
		</div>

	</div>




	<input type="hidden" id="basePath" value="<%=basePath%>">
	<input type="hidden" value="${listGame}" id="listGame">
	<input type="hidden" value="${listGroup}" id="listGroup">
	<script
		src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script
		src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

	<script type="text/javascript">
		var basePath = $("#basePath").val();
		//initGame();
		//每隔5秒执行一次方法
		//window.setInterval("initGame()", 10000);

		//加载游戏列表
		function initGame() {
			$
					.ajax({
						url : basePath + "groups.do",
						type : "POST",
						data : {},
						dataType : "json",
						async : false,
						success : function(listActivity) {
							$("[name=games]").empty();
							for ( var i = 0; i < listActivity.length; i++) {
								if ((i + 1) % 2 != 0) {
									$("[name=games]").append(
											"<div class='row' >");
								}
								$("[name=games]")
										.append(
												"<div class='col-sm-6 col-md-6'>"
														+ "<div class='thumbnail'>"
														+ "<img src='"
														+ listActivity[i].gameUrl
														+ "' alt='...'"
														+ " style='height: 100px;'"
														//+ " style='width: 50%;'"
														+ ">"
														+ "<div class='caption'>"
														+ "<h3>"
														+ listActivity[i].gameName
														+ "</h3>"
														+ "<p>...</p>"
														+ "<p>"
														+ "<a href='#' class='btn btn-primary' role='button'>加入</a>"
														//+ "<a href='#' class='btn btn-default' role='button'>Button</a>"
														+ "</p>" + "</div>"
														+ "</div>" + "</div>");
								if ((i + 1) % 2 == 0) {
									$("[name=games]").append("</div>");
								}
							}

						},
						error : function(xhr, textStatus, errorThrown) {
							/*错误信息处理*/
							alert("进入error---");
							alert("状态码：" + xhr.status);
							alert("状态:" + xhr.readyState);//当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
							alert("错误信息:" + xhr.statusText);
							alert("返回响应信息：" + xhr.responseText);//这里是详细的信息
							alert("请求状态：" + textStatus);
							alert(errorThrown);
							alert("请求失败");
						}
					});
		}
	</script>
</body>
</html>